<template>
  <div id="brokenline" style="width: 90vw; height: 400px"></div>
</template>

<script>
import { selectAllData } from "../../../network/index";
export default {
  data() {
    return {
      // 按钮的显示
      show: true,
      // 绘制的数据
      drawing: {
        title: {
          left: "center",
          text: "填写问卷次数的分析",
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("brokenline"));
      // 绘制图表
      //   按钮的显示
      this.show = !this.show;

      // 查询所有的数据
      selectAllData({ formId: localStorage.getItem("id") }).then((res) => {
        if (res != null) {
          // console.log(this.drawing.series[0].data)
          this.drawing.series[0].data = [];
          res.data.forEach((element) => {
            this.drawing.series[0].data.push(element);
          });
        }
        // console.log(this.drawing.series[0].data);
        myChart.setOption(this.drawing);
        // echarts的图表自适应 这个是浏览器窗口大小的自适应
        window.onresize = function () {
          myChart.resize();
        };
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style scoped>
#brokenline {
  text-align: center;
  margin: 0 auto;
}
</style>